import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

class GetDataDemo extends StatelessWidget {
  const GetDataDemo({
    super.key,
    this.title = '商品列表',
  });

  final String title;

  // 重写build 返回需要封装的组件即可
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.purple,
          title: Center(
            child: Text(
              '$title',
              style: const TextStyle(
                  color: Colors.orange,
                  fontSize: 30,
                  fontWeight: FontWeight.w900),
            ),
          ),
        ),
        // 1.2 主体部分
        body: const Center(
          child: DioContent(),
        ),
      ),
    );
  }
}

class DioContent extends StatefulWidget {
  const DioContent({super.key});

  @override
  State<DioContent> createState() => _DioContentState();
}

class _DioContentState extends State<DioContent> {
  final dio = Dio();
  List goodsList = [];

  getListData() async {
    final res = await dio.get('https://mock.boxuegu.com/mock/1172/orders');
    print(res.data);
    setState(() {
      goodsList = res.data as List;
    });
  }

  @override
  void initState() {
    super.initState();
    getListData();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemBuilder: (BuildContext context, int index) {
        return Container(
          padding: const EdgeInsets.all(10.0),
          color: Colors.white,
          child: Column(
            children: [
              // 1. 订单创建时间+订单状态
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // 创建时间
                  Text(
                    '${goodsList[index]['createTime']}',
                    style:
                        const TextStyle(color: Color(0xFF666666), fontSize: 13),
                  ),
                  // 状态
                  Text(
                    '订单状态 ${goodsList[index]['orderState']}',
                    style:
                        const TextStyle(color: Color(0xFFFF9240), fontSize: 13),
                  ),
                ],
              ),
              // 2. 商品图片+名称+数量+规格+单价
              Padding(
                padding: const EdgeInsets.only(top: 10.0),
                child: Row(
                  children: [
                    // 图片
                    Image.network(
                      '${goodsList[index]['image']}',
                      width: 86.0,
                      height: 86.0,
                    ),
                    // 名称+数量+规格+单价
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 10.0),
                        child: Column(
                          // 保证名称+数量+规格+单价居左对齐
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            // 名称+数量
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                // 名称
                                Expanded(
                                  child: Text(
                                    '${goodsList[index]['name']}',
                                    style: const TextStyle(
                                        color: Color(0xFF262626), fontSize: 14),
                                  ),
                                ),
                                // 数量
                                Padding(
                                  padding: const EdgeInsets.only(left: 10.0),
                                  child: Text(
                                    'x ${goodsList[index]['totalNum']}',
                                    style: const TextStyle(
                                        color: Color(0xFF262626), fontSize: 14),
                                  ),
                                ),
                              ],
                            ),
                            // 规格
                            Padding(
                              padding: const EdgeInsets.only(top: 6.0),
                              child: Container(
                                decoration: BoxDecoration(
                                  color: const Color(0xFFF1F1F1),
                                  borderRadius: BorderRadius.circular(2.0),
                                ),
                                padding: const EdgeInsets.symmetric(
                                    vertical: 3, horizontal: 5),
                                child: Text(
                                  '${goodsList[index]['attrsText']}',
                                  style: const TextStyle(
                                      color: Color(0xFF888888), fontSize: 12.0),
                                ),
                              ),
                            ),
                            // 单价
                            Padding(
                              padding: const EdgeInsets.only(top: 6.0),
                              child: Text(
                                '¥${goodsList[index]['curPrice']}',
                                style: const TextStyle(
                                    color: Color(0xFF262626), fontSize: 14.0),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              // 3. 合计
              Padding(
                padding: const EdgeInsets.only(top: 10.0),
                child: Container(
                  alignment: Alignment.centerRight,
                  child: Text(
                    '合计：¥${goodsList[index]['totalMoney']}',
                    style: const TextStyle(
                        color: Color(0xFF262626), fontSize: 14.0),
                  ),
                ),
              ),
              // 4. 再次购买
              Padding(
                padding: const EdgeInsets.only(top: 10.0),
                child: Container(
                  alignment: Alignment.centerRight,
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(
                          color: const Color(0xFF666666), width: 0.5),
                      borderRadius: BorderRadius.circular(2.0),
                    ),
                    padding:
                        const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
                    child: const Text(
                      '再次购买',
                      style:
                          TextStyle(color: Color(0xFF666666), fontSize: 14.0),
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return Container(height: 8.0, color: const Color(0xFFF7F7F8));
      },
      itemCount: goodsList.length,
    );
  }
}
